<template>
  <div>
    <baidu-map
      class="map"
      :center="markerPoint"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @zoomend="syncCenterAndZoom"
      :mapType="mapType"
      
      :style="{height:mapWidth}"
    >
      <!-- 地图类型 -->
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      ></bm-map-type>
      <bm-control class="tool-case-b">
        <div style="float:right;padding-right:20px; ">
          <Dropdown>
            <Button size="large" style="font-size:16px;">
              <Icon type="ios-cube" />工具箱
              <Icon type="ios-arrow-down" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem @click="handleListClick">清除</DropdownItem>
              <DropdownItem>测距</DropdownItem>
              <DropdownItem>控件显隐</DropdownItem>
              <DropdownItem>
                <button
                  @click="showTraffic=!showTraffic"
                  class="tool-case-btn"
                >路况：{{showTraffic?'开':'关'}}</button>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </bm-control>
      <bm-control>
        <div class="states-bar">
          <Divider type="vertical" />
          <button @click="()=>showModel()">
            <Icon type="ios-car" style="color:#2b85e4" />全部：12
          </button>
          <Divider type="vertical" />
          <button @click="()=>showModel()">
            <Icon type="ios-car" style="color:#19be6b" />在线：12
          </button>
          <Divider type="vertical" />
          <button @click="()=>showModel()">
            <Icon type="ios-car" style="color:#808695" />离线：12
          </button>
          <Divider type="vertical" />
          <button @click="()=>showModel()">
            <Icon type="ios-car" style="color:#2db7f5" />行驶：12
          </button>
          <Divider type="vertical" />
          <button @click="()=>showModel()">
            <Icon type="ios-car" style="color:#ff9900" />停车：12
          </button>
          <Divider type="vertical" />
          <button style="color:#ed4014">
            <Icon type="ios-car" />警情：12
          </button>
          <Divider type="vertical" />
          <button @click="handleListClick" style="font-size:20px;width:40px;" title="警情声音开关">
            <Icon v-if="voiceOpen" type="md-volume-up" />
            <Icon v-else type="md-volume-off" style="color:#ed4014" />
          </button>
        </div>
      </bm-control>
      <!-- 标记点 -->

       <bm-info-window :position="markerPoint" :show="isTrackPlayback" @close="infoWindowClose" @open="infoWindowOpen">
         <div >
           <h5>苏E3C938</h5>
           <p>速度：0(km/h)</p>
           <p>状态：在线-启动-定位</p>
           <p>定位：2020-08-20 19:05:48 上点：2020-08-20 19:05:48</p>
           <p>地址：江苏省苏州市虎丘区</p>
           <div  style="text-align:center;width:400px;padding-top:10px;border-top:1px solid #ccc;">
             <Button type="text" icon="md-locate" size="small">轨迹</Button>
             <Button type="text" icon="logo-youtube" size="small">视频</Button>
             <Button type="text" icon="ios-navigate-outline" size="small">追踪</Button>
         </div>
         </div>
       </bm-info-window>

      <bml-marker-clusterer :averageCenter="true" v-if="!isTrackPlayback">
        <bm-marker
          v-for="marker of markers"
          :key="marker.lng"
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="{url: 'https://s1.ax1x.com/2020/07/09/Um0oOe.png', size: {width: 50, height: 50}}"
          :rotation="90"
          @click="infoWindowOpen"
        ></bm-marker>
      </bml-marker-clusterer>
      <!-- 路况 -->
      <bm-traffic v-if="showTraffic" />
    </baidu-map>
  </div>
</template>
<script>
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  components: {
    BmlMarkerClusterer,
  },
  props: {
    // 轨迹回
    // 显示路况图层columns1
    mapWidth: {
      type: String,
      default: "560px",
    },
  },
  data() {
    const markers = [];
    for (let i = 0; i < 10; i++) {
      const position = {
        lng: Math.random() * 4 + 112,
        lat: Math.random() * 3 + 22,
      };
      markers.push(position);
    }
    return {
      isTrackPlayback:false,
      showTraffic: false,
      markers: markers,
      mapType: "BMAP_NORMAL_MAP", //是否正在播放
      markerPoint: {
        lng: 113.2592945,
        lat: 23.1301964,
      },
      zoom: 7,
      voiceOpen: false,
    };
  },
  computed: {},
  methods: {
    infoWindowClose () {

      this.isTrackPlayback=false
    },

    infoWindowOpen(e){
      console.log(e)
      this.markerPoint=e.point
      this.isTrackPlayback=true
    },
    showModel() {
      this.$emit("showModel");
    },
    handleListClick() {
      this.voiceOpen = !this.voiceOpen;
    },
    chooesAare(e) {
      let { target } = e;
      console.log(target.getPath());
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    addPolygonPoint() {
      this.polygonPath.push({ lng: 116.404, lat: 39.915 });
    },
    //处理缩放
    syncCenterAndZoom(e) {
      this.zoom = e.target.getZoom();
    },
    changeMapType(e) {
      this.mapType = e;
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
}
.m-2 {
  margin-left: 20px;
}
.tool-case {
  margin-top: 10px;
  width: 100%;
}
.tool-case-b {
  margin-top: 10px;
  width: 100%;
}
.tool-case-btn {
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}
.states-bar {
  background-color: white;
  margin-left: 20px;
  margin-top: 10px;
  border-radius: 5px;
  color: #808695;
}
.states-bar button {
  border: none;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: white;
  outline: none;
  font-size: 14px;
}
.states-bar button:hover {
  background-color: rgba(63, 129, 160, 0.1);
}
.states-bar i{
  margin-right: 8px;
}
</style>

